<template>
	<view>
		<view class="body after-navber">
			<view class="info">
				<view class="info-content">
					<view class="info-label" v-for="(item, index) in list" :key="item.id">
						<navigator :url="'/pages2/group/merchant/merchant?id='+item.id"
							class="info-up flex-y-center flex-row">
							<view class="info-img flex-grow-0">
								<image class="img" :src="item.image"></image>
							</view>
							<view class="info-text flex-grow-1">
								<view class="info-name flex-row" style="flex-direction:row">
									<text style="width: 70%;">{{ item.name }}</text>
									<text style="color: #ff4544;">{{item.status_text}}</text>	
								</view>
								<view class="info-time">联系人：{{ item.realname}}</view>
								<view class="info-time">联系电话：{{ item.mobile }}</view>
								<view class="info-time">
									<button @tap.stop="daodian(item.id,item.name)" class="order-option-btn"> 服务产品上传</button>
								</view>
							</view>
						</navigator>
					</view>
				</view>
				<view class="info-footer flex-row" v-if="!has_more">
					<view class="info-before">
						<view class="info-border"></view>
					</view>
					<view class="info-t">没有更多了</view>
					<view class="info-after">
						<view class="info-border"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Agent
	} from '../../../apirequest/agent-model.js';
	var a = new Agent();
	export default {
		data() {
			return {
				status: 1,
				first_count: 1,
				second_count: 1,
				third_count: 0,
				list: [],
				page: 1,
				has_more: true,
			}
		},
		onLoad() {
			this._getList();
		},
		onReachBottom() {
			this._getList();
		},
		methods: {
			_getList() {
				var that = this;
				if (!this.has_more) {
					return false;
				}
				var page = this.page
				a.my_store_list({
					page: page,
				}, (res) => {
					if (res.code == 1) {
						that.list = that.list.concat(res.data.data)
						that.page = page + 1
						that.has_more = res.data.has_more
					}
				})
			},
			daodian(store_id,name){
				var that = this;
				uni.navigateTo({
					url:"/pages2/salesman/daodian/daodian?store_id="+store_id+'&name='+name
				})
			},
			changeStatus(status) {
				this.status = status
				this.list = []
				this.page = 1
				this.has_more = true
				this._getList()
			},
		}
	}
</script>

<style>
	.order-option-btn {
	    border: 1rpx solid #bbb;
	    background: #fff;
	    border-radius: 10rpx;
	    height: 70rpx;
	    line-height: 70rpx;
	    color: inherit;
	    margin-left: 30rpx;
	    padding: 0 30rpx;
		width: 280rpx;
		float: right;
	}
	.info {
		width: 100%;
	}

	.width {
		width: 50%;
		text-align: center;
	}

	.width-50 {
		width: 50%;
		text-align: center;
	}

	.info .info-title .info-text.active {
		color: #ff4544;
		border-bottom: 4rpx #ff4544 solid;
	}

	.info .info-title {
		width: 100%;
		height: 100rpx;
		padding: 0 24rpx;
		border-bottom: 1rpx #e3e3e3 solid;
		font-size: 13pt;
		background-color: #fff;
		line-height: 80rpx;
		position: fixed;
		top: 0;
		left: 0;
	}

	.info-title .info-text {
		height: 100rpx;
		line-height: 100rpx;
	}

	.info .info-content {
		width: 100%;
		margin-bottom: 12rpx;
	}

	.info .info-content .info-label {
		width: 100%;
		background-color: #fff;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
	}

	.info-label .info-up {
		width: 100%;
		height: 240rpx;
	}

	.info-label .info-down {
		width: 100%;
		height: 80rpx;
		color: #666;
	}

	.info-label .info-up .info-img {
		margin-right: 24rpx;
	}

	.info-up .info-img .img {
		width: 100rpx;
		height: 100rpx;
	}

	.info-up .info-text .info-name {
		color: #353535;
		margin-bottom: 16rpx;
	}

	.info-up .info-text .info-time {
		font-size: 9pt;
		color: #666666;
		margin-bottom: 10rpx;
	}

	.info-down .info-left {
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
	}

	.info-down .info-right {
		float: right;
		height: 80rpx;
		width: 50%;
		line-height: 80rpx;
		text-align: right;
	}

	.info .info-footer {
		color: #bbb;
		text-align: center;
		width: 100%;
		padding: 0 100rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.info .info-footer .info-t {
		height: 60rpx;
		margin: 0 20rpx;
	}

	.info .info-footer .info-before {
		width: 168rpx;
		height: 60rpx;
	}

	.info .info-footer .info-after {
		width: 168rpx;
		height: 60rpx;
	}

	.info .info-footer .info-border {
		border-bottom: 1rpx #e3e3e3 solid;
		padding-bottom: 30rpx;
	}
</style>
